<template>
    <view class="book-classify common-interval">
        <view class="class-item" v-for="item in classList" :key="item.apiName" @tap="watchDetail(item)">
            <image mode="aspectFit" :src="http+item.imgUrl+'.png'"/>
            <view>{{item.label}}</view>
        </view>
    </view>
</template>

<script>
    import {
        mapMutations
    } from 'vuex';
    import service from "@/service";
    export default {
        name: "book-classify",
        data(){
            return {
               http: this.$https,
               classList: [
                   {
                       apiName: 'authors',
                       label: '名家大师',
                       id: 'author',
                       type: 1,
                       imgUrl: 'home-teacher'
                   },
                   {
                       apiName: 'awards',
                       label: '大奖作品',
                       id: 'award',
                       type: 1,
                       imgUrl: 'home-prize1'
                   },
                   {
                       apiName: 'roless',
                       label: '图画角色',
                       id: 'roles',
                       type: 1,
                       imgUrl: 'home-role1'
                   },
                   {
                       apiName: '4',
                       label: '少儿英语',
                       id: 4,
                       type: 3,
                       imgUrl: 'home-english1'
                   },
                   {
                       apiName: '5',
                       label: '分龄阅读',
                       id: 'age',
                       type: 2,
                       imgUrl: 'home-age1'
                   },
                   {
                       apiName: 'themes',
                       label: '主题系列',
                       id: 'theme',
                       type: 1,
                       imgUrl: 'home-theme1'
                   },
                   {
                       apiName: '7',
                       label: '游戏互动',
                       id: 12,
                       type: 3,
                       imgUrl: 'home-games1'
                   },
                   {
                       apiName: '8',
                       label: '家长必读',
                       id: 5,
                       type: 3,
                       imgUrl: 'home-parents5'
                   },
               ],
                icon: {
                   '1': ''
                }
            }
        },
        methods:{
            ...mapMutations(['classId']),
            // 进入分类页面
            watchDetail(item){
                this.classId(item.apiName);
                this.$store.commit('className', item.label);
                if(item.type === 3){
                    this.getClassSorts(item.id, item)
                    return;
                }
                uni.navigateTo({
                    url: `./classDetail/index?id=${item.id}&type=${item.type}&label=${item.label}`
                })

            },
            getClassSorts (sortId, item) {
                uni.showLoading({
                    title: '加载中',
                });
                service.homeService.getClassSorts({
                    data: {
                        sortId: sortId,
                        page: 1,
                        limit: 10
                    },
                    success: res => {
                        uni.hideLoading();
                        if (res.code === 200) {
                            let data = res.result.data || [];
                            if(data.length){
                                uni.navigateTo({
                                    url: `./classDetail/index?id=${item.id}&type=${item.type}&label=${item.label}`
                                })
                            } else {
                                uni.navigateTo({
                                    url: `../classification/class-search-list?idName=sort&id=${sortId}`
                                })
                            }
                        }
                    },
                    fail: ()=>{
                        uni.hideLoading();
                    },
                    complete: () => {
                    },
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .book-classify{
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        .class-item{
            flex:0 0 113rpx;
            margin-right: 80rpx;
            margin-bottom: 40rpx;
            text-align: center;
            font-size:28rpx;
            line-height:40rpx;
            color:rgba(51,51,51,1);
            &:nth-of-type(4n){
                margin-right: 0;
            }
            image{
                width: 70rpx;
                height: 80rpx;
            }
        }
    }
</style>